<template>
  <div :class="b('menu')">
    <div :class="b('left')">
      <el-button
        type="success"
        @click="crud.rowAdd"
        :icon="config.addBtnIcon"
        :size="crud.isMediumSize"
        v-permission="crud.getPermission('addBtn')"
        v-if="vaildData(crud.tableOption.addBtn, config.addBtn)"
      >
        <template v-if="!crud.isIconMenu">
          {{ crud.menuIcon('addBtn') }}
        </template>
      </el-button>
      <el-button
        type="success"
        @click="crud.rowCellAdd"
        :icon="config.addBtnIcon"
        v-permission="crud.getPermission('addRowBtn')"
        :size="crud.isMediumSize"
        v-if="vaildData(crud.tableOption.addRowBtn, config.addRowBtn)"
      >
        <template v-if="!crud.isIconMenu">
          {{ crud.menuIcon('addBtn') }}
        </template>
      </el-button>
      <slot name="menuLeft" :size="crud.isMediumSize"></slot>
    </div>
    <div :class="b('right')">
      <avue-date
        type="datetimerange"
        @change="dateChange"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :pickerOptions="pickerOptions"
        style="display: inline-block; margin-right: 20px"
        v-if="vaildData(crud.tableOption.dateBtn, config.dateBtn)"
        :size="crud.isMediumSize"
      ></avue-date>
      <slot name="menuRight" :size="crud.isMediumSize"></slot>
      <el-button
        :icon="config.excelBtnIcon"
        circle
        :size="crud.isMediumSize"
        @click="rowExcel"
        v-permission="crud.getPermission('excelBtn')"
        v-if="vaildData(crud.tableOption.excelBtn, config.excelBtn)"
      ></el-button>
      <el-button
        :icon="config.printBtnIcon"
        circle
        :size="crud.isMediumSize"
        @click="rowPrint"
        v-permission="crud.getPermission('printBtn')"
        v-if="vaildData(crud.tableOption.printBtn, config.printBtn)"
      ></el-button>
      <el-button
        :icon="config.refreshBtnIcon"
        circle
        :size="crud.isMediumSize"
        @click="crud.refreshChange"
        v-permission="crud.getPermission('refreshBtn')"
        v-if="vaildData(crud.tableOption.refreshBtn, config.refreshBtn)"
      ></el-button>
      <el-button
        :icon="config.columnBtnIcon"
        circle
        :size="crud.isMediumSize"
        @click="crud.$refs.dialogColumn.columnBox = true"
        v-permission="crud.getPermission('columnBtn')"
        v-if="vaildData(crud.tableOption.columnBtn, config.columnBtn)"
      ></el-button>
      <el-button
        :icon="config.searchBtnIcon"
        circle
        :size="crud.isMediumSize"
        @click="crud.$refs.headerSearch.handleSearchShow()"
        v-if="
          (crud.$refs.headerSearch || {}).searchFlag &&
          vaildData(crud.tableOption.searchShowBtn, true)
        "
      ></el-button>
      <el-button
        :icon="config.filterBtnIcon"
        circle
        :size="crud.isMediumSize"
        @click="crud.$refs.dialogFilter.box = true"
        v-permission="crud.getPermission('filterBtn')"
        v-if="vaildData(crud.tableOption.filterBtn, config.filterBtn)"
      ></el-button>
    </div>
  </div>
</template>

<script>
import config from './config'
import { Crud } from '../../../../assets/avue/avue'

export default {
  extends: Crud.components.headerMenu,
  data() {
    return {
      config,
    }
  },
}
</script>

<style lang="scss" scoped></style>
